<template>
    <h-section title="需求管理情况" collapse>
        <a-row style="height: 100%; position: relative">
            <a-col :span="12">
                <flexbox justify="space-between" style="padding-right: 48px; box-sizing: border-box">
                    <div style="min-width: 120px; padding-bottom: 24px">
                        <div style="font-size: 14px; color: #505a6e; margin-bottom: 48px">
                            <span>业务需求</span>
                            <a
                                class="margin-l-8"
                                v-if="detail.businessInfos && detail.businessInfos.length"
                                @click="handleShowDetail('businessInfos')"
                                >查看明细</a
                            >
                        </div>
                        <flexbox>
                            <flexbox direction="column" justify="center" align="center" style="flex-shrink: 0">
                                <flexbox style="position: relative">
                                    <span ref="taskAddcountRef" class="font-w-b" style="font-size: 20px; min-height: 28px">{{
                                        info[0].addCount
                                    }}</span>
                                    <a-tag
                                        class="pro-addcount-tag"
                                        :color="info[0].addCount - info[0].lastAddCount > 0 ? 'red' : 'green'"
                                        v-if="info[0].lastAddCount && info[0].addCount != info[0].lastAddCount"
                                        :style="{ left: getAddTaskTagLeft() }"
                                    >
                                        {{ info[0].addCount - info[0].lastAddCount > 0 ? '+' : '-' }}
                                        {{
                                            info[0].lastAddCount
                                                ? (Math.abs(info[0].addCount - info[0].lastAddCount) / info[0].lastAddCount).toFixed(2)
                                                : ''
                                        }}
                                    </a-tag>
                                </flexbox>
                                <a
                                    style="font-size: 12px; text-decoration: underline"
                                    @click="jumpTo(info[0].type, info[0].addIds)"
                                    v-if="info[0].addIds"
                                    >新增总数</a
                                >
                                <span style="font-size: 12px; color: #8590a5" v-else>新增总数</span>
                            </flexbox>
                            <flexbox direction="column" justify="center" style="width: 100px; margin-left: 89px; flex-shrink: 0">
                                <span class="font-w-b" style="font-size: 20px; margin-right: 1px; min-height: 28px">{{ info[0].processCount }}</span>
                                <a
                                    style="font-size: 12px; text-decoration: underline"
                                    @click="jumpTo(info[0].type, info[0].processIds)"
                                    v-if="info[0].processIds"
                                    >处理中数</a
                                >
                                <span style="font-size: 12px; color: #8590a5" v-else>处理中数</span>
                            </flexbox>
                        </flexbox>
                        <flexbox>
                            <flexbox direction="column" justify="center" style="margin-top: 12px; flex-shrink: 0">
                                <span class="font-w-b" style="font-size: 20px; min-height: 28px">{{ info[0].onlineCount }}</span>
                                <a
                                    style="font-size: 12px; text-decoration: underline"
                                    @click="jumpTo(info[0].type, info[0].onlineIds)"
                                    v-if="info[0].onlineIds"
                                    >上线总数</a
                                >
                                <span style="font-size: 12px; color: #8590a5" v-else>上线总数</span>
                            </flexbox>
                            <flexbox direction="column" justify="center" style="width: 100px; margin-top: 12px; margin-left: 89px; flex-shrink: 0">
                                <span class="font-w-b" style="font-size: 20px; min-height: 28px">{{ info[0].suspendCount }}</span>
                                <a
                                    style="font-size: 12px; text-decoration: underline"
                                    @click="jumpTo(info[0].type, info[0].suspendIds)"
                                    v-if="info[0].suspendIds"
                                    >挂起数</a
                                >
                                <span style="font-size: 12px; color: #8590a5" v-else>挂起数</span>
                            </flexbox>
                        </flexbox>
                    </div>
                    <div style="width: 250px">
                        <h-pie-chart
                            :option="taskOption"
                            :defaultColor="[
                                '#1890FF',
                                '#F7B62A',
                                '#2FC25B',
                                '#13C2C2',
                                '#FB7555',
                                '#945FB9',
                                '#F279AB',
                                '#1E9493',
                                '#FF9845',
                                '#1AA5D7',
                            ]"
                            v-if="taskOption"
                        />
                    </div>
                </flexbox>
            </a-col>
            <a-col :span="12">
                <flexbox justify="space-between" style="padding: 0 24px 0 48px; box-sizing: border-box">
                    <div style="min-width: 120px; padding-bottom: 24px">
                        <div style="font-size: 14px; color: #505a6e; margin-bottom: 48px">
                            <span>产品需求</span>
                            <a class="margin-l-8" v-if="detail.productInfos && detail.productInfos.length" @click="handleShowDetail('productInfos')"
                                >查看明细</a
                            >
                        </div>
                        <flexbox>
                            <flexbox direction="column" justify="center" style="flex-shrink: 0">
                                <flexbox style="position: relative">
                                    <span ref="proAddcountRef" class="font-w-b" style="font-size: 20px; min-height: 28px">{{
                                        info[1].addCount
                                    }}</span>
                                    <a-tag
                                        class="pro-addcount-tag"
                                        :color="info[1].addCount - info[1].lastAddCount > 0 ? 'red' : 'green'"
                                        v-if="info[1].lastAddCount && info[1].addCount != info[1].lastAddCount"
                                        :style="{ left: getAddProTagLeft() }"
                                    >
                                        {{ info[1].addCount - info[1].lastAddCount > 0 ? '+' : '-' }}
                                        {{
                                            info[1].lastAddCount
                                                ? (Math.abs(info[1].addCount - info[1].lastAddCount) / info[1].lastAddCount).toFixed(2)
                                                : ''
                                        }}
                                    </a-tag>
                                </flexbox>
                                <a
                                    style="font-size: 12px; text-decoration: underline"
                                    @click="jumpTo(info[1].type, info[1].addIds)"
                                    v-if="info[1].addIds"
                                    >新增总数</a
                                >
                                <span style="font-size: 12px; color: #8590a5" v-else>新增总数</span>
                            </flexbox>
                            <flexbox direction="column" justify="center" style="width: 100px; margin-left: 89px; flex-shrink: 0">
                                <span class="font-w-b" style="font-size: 20px; min-height: 28px">{{ info[1].processCount }}</span>
                                <a
                                    style="font-size: 12px; text-decoration: underline"
                                    @click="jumpTo(info[1].type, info[1].processIds)"
                                    v-if="info[1].processIds"
                                    >处理中数</a
                                >
                                <span style="font-size: 12px; color: #8590a5" v-else>处理中数</span>
                            </flexbox>
                        </flexbox>
                        <flexbox>
                            <flexbox direction="column" justify="center" style="margin-top: 12px; flex-shrink: 0">
                                <span class="font-w-b" style="font-size: 20px; min-height: 28px">{{ info[1].onlineCount }}</span>
                                <a
                                    style="font-size: 12px; text-decoration: underline"
                                    @click="jumpTo(info[1].type, info[1].onlineIds)"
                                    v-if="info[1].onlineIds"
                                    >上线总数</a
                                >
                                <span style="font-size: 12px; color: #8590a5" v-else>上线总数</span>
                            </flexbox>
                            <flexbox direction="column" justify="center" style="width: 100px; margin-top: 12px; margin-left: 89px; flex-shrink: 0">
                                <span class="font-w-b" style="font-size: 20px; min-height: 28px">{{ info[1].suspendCount }}</span>
                                <a
                                    style="font-size: 12px; text-decoration: underline"
                                    @click="jumpTo(info[1].type, info[1].suspendIds)"
                                    v-if="info[1].suspendIds"
                                    >上线总数</a
                                >
                                <span style="font-size: 12px; color: #8590a5" v-else>挂起数</span>
                            </flexbox>
                        </flexbox>
                    </div>
                    <div style="width: 250px">
                        <h-pie-chart
                            :option="proOption"
                            :defaultOption="defaultProOption"
                            :defaultColor="[
                                '#1890FF',
                                '#F7B62A',
                                '#2FC25B',
                                '#13C2C2',
                                '#FB7555',
                                '#945FB9',
                                '#F279AB',
                                '#1E9493',
                                '#FF9845',
                                '#1AA5D7',
                            ]"
                        />
                    </div>
                </flexbox>
            </a-col>
            <div style="position: absolute; left: calc(50% - 25px); top: 30px; width: 1px; height: 200px; border: 1px solid #edeff3"></div>
        </a-row>

        <ListModal ref="ListModalRef" />
    </h-section>
</template>

<script lang="ts">
import api from '@/api';
import store from '@/store';
import { useRouter } from 'vue-router';
import filters from '@/utils/filter';
import HPieChart from '../HPieChart.vue';
import ListModal from './ListModal.vue';
import { defineComponent, reactive, toRefs, watch, ref, unref, nextTick } from 'vue';
export default defineComponent({
    components: {
        HPieChart,
        ListModal
    },
    props: {
        info: {
            type: Object,
            default: () => ({})
        },
        detail: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const router = useRouter();
        const ListModalRef = ref<any>();
        const proAddcountRef = ref<any>();
        const taskAddcountRef = ref<any>();
        const state = reactive<any>({
            taskOption: null,
            proOption: null,
            defaultProOption: { seriesName: '产品需求数量', title: '产品需求总数', numTotal: 0 }
        });
        // 获取业务需求
        // const getTaskList = () => {
        //     const { startTime, endTime } = filters.reportTimeRangeFilter(props.detail.reportName, props.detail.reportType);
        //     let businessInfos = props.detail.businessInfos.filter((item) => {
        //         let time = new Date(item.issueCreateTime).getTime();
        //         return time <= new Date(endTime).getTime() && time >= new Date(startTime).getTime();
        //     });
        //     const { typeArr, dataArr } = getPieChartData(businessInfos, 'issueType');
        //     state.taskOption = {
        //         typeArr,
        //         dataArr,
        //         seriesName: '业务需求数量',
        //         title: '业务需求总数',
        //         numTotal: businessInfos.length,
        //     };
        // };
        // // 获取产品需求
        // const getProList = () => {
        //     const { startTime, endTime } = filters.reportTimeRangeFilter(props.detail.reportName, props.detail.reportType);
        //     const productInfos = props.detail.productInfos.filter((item) => {
        //         let time = new Date(item.issueCreateTime).getTime();
        //         return time <= new Date(endTime).getTime() && time >= new Date(startTime).getTime();
        //     });
        //     const { typeArr, dataArr } = getPieChartData(productInfos, 'issueType');
        //     state.proOption = {
        //         typeArr,
        //         dataArr,
        //         seriesName: '产品需求数量',
        //         title: '产品需求总数',
        //         numTotal: productInfos.length,
        //     };
        // };
        // // 转化成图表数据
        // const getPieChartData = (list, field) => {
        //     let typeArr: any = [];
        //     let dataArr: any = [];
        //     let group = {};
        //     list.forEach((item) => {
        //         group[item[field]] = group[item[field]] || { value: 0 };
        //         group[item[field]].value++;
        //     });
        //     let typesArr = Object.keys(group);
        //     typesArr.forEach((item) => {
        //         if (group[item] && group[item].value) {
        //             typeArr.push(item);
        //             dataArr.push({
        //                 value: group[item].value,
        //                 name: item,
        //             });
        //         }
        //     });
        //     return {
        //         dataArr,
        //         typeArr,
        //     };
        // };

        // 获取产品需求
        const getTaskList = async () => {
            const query = {
                ids: props.info[0].addIds
            };
            const { success, moule } = await api.pmpRequestInfoModel.findByIds(query);
            if (success) {
                const { typeArr, dataArr } = getPieChartData(moule, 'requestType');
                state.taskOption = {
                    typeArr,
                    dataArr,
                    seriesName: '业务需求数量',
                    title: '业务需求总数',
                    numTotal: moule.length
                };
            }
        };
        // 获取产品需求
        const getProList = async () => {
            const query = {
                ids: props.info[1].addIds
            };
            const { success, moule } = await api.productRequireModel.findProductsByIds(query);
            if (success) {
                const { typeArr, dataArr } = getPieChartData(moule, 'requireType');
                state.proOption = {
                    typeArr,
                    dataArr,
                    seriesName: '产品需求数量',
                    title: '产品需求总数',
                    numTotal: moule.length
                };
            }
        };
        // 转化成图表数据
        const getPieChartData = (list, field) => {
            const typeArr: any = [];
            const dataArr: any = [];
            const group = {};
            list.forEach((item) => {
                group[item[field]] = group[item[field]] || { value: 0 };
                group[item[field]].value++;
            });
            store.getters.dicOptions[field].forEach((item) => {
                if (group[item.code] && group[item.code].value) {
                    typeArr.push(item.dimensionName);
                    dataArr.push({
                        value: group[item.code].value,
                        name: item.dimensionName
                    });
                }
            });
            return {
                dataArr,
                typeArr
            };
        };

        const handleShowDetail = (key) => {
            unref(ListModalRef).open(key, props.detail);
        };

        const jumpTo = (type, ids, status = null) => {
            const query: any = {
                ids,
                type,
                systemName: props.detail.systemName
            };
            const path = type === '1' ? '/energyManage/analysisReport/taskDetailList' : '/energyManage/analysisReport/proDetailList';
            if (status) {
                query.status = status;
            }
            router.push({
                path,
                query
            });
        };

        const getAddProTagLeft = () => {
            let clientWidth = 0;
            if (unref(proAddcountRef)) {
                if (unref(proAddcountRef).clientWidth) {
                    clientWidth = +unref(proAddcountRef).clientWidth + 5;
                }
            }
            return `${clientWidth}px`;
        };

        const getAddTaskTagLeft = () => {
            let clientWidth = 0;
            if (unref(taskAddcountRef)) {
                if (unref(taskAddcountRef).clientWidth) {
                    clientWidth = +unref(taskAddcountRef).clientWidth + 5;
                }
            }
            return `${clientWidth}px`;
        };

        watch(
            () => props.detail,
            (n) => {
                // if (n.businessInfos && n.businessInfos.length) {
                //     getTaskList();
                // }
                // if (n.productInfos && n.productInfos.length) {
                //     getProList();
                // }
                getTaskList();
                getProList();
            },
            { deep: true, immediate: true }
        );

        return {
            ListModalRef,
            ...toRefs(state),
            handleShowDetail,
            jumpTo,
            getAddProTagLeft,
            getAddTaskTagLeft,
            proAddcountRef,
            taskAddcountRef
        };
    }
});
</script>

<style scoped lang="less">
::v-deep(.ant-tag) {
    margin-right: 0 !important;
}
.pro-addcount-tag {
    border-radius: 10px;
    position: absolute;
    top: 5px;
}
</style>